<template>
  <div class="data-sync-edit">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>编辑数据同步任务</span>
          <el-button-group>
            <el-button @click="$router.go(-1)">返回</el-button>
            <el-button type="primary" @click="handleSave">保存</el-button>
          </el-button-group>
        </div>
      </template>
      
      <el-form :model="form" label-width="120px">
        <el-form-item label="任务名称">
          <el-input v-model="form.name" placeholder="请输入任务名称" />
        </el-form-item>
        
        <el-form-item label="源数据库">
          <el-select v-model="form.sourceDb" placeholder="请选择源数据库">
            <el-option label="MySQL" value="mysql" />
            <el-option label="PostgreSQL" value="postgresql" />
            <el-option label="Oracle" value="oracle" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="目标数据库">
          <el-select v-model="form.targetDb" placeholder="请选择目标数据库">
            <el-option label="Doris" value="doris" />
            <el-option label="ClickHouse" value="clickhouse" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="同步方式">
          <el-radio-group v-model="form.syncType">
            <el-radio value="full">全量同步</el-radio>
            <el-radio value="incremental">增量同步</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" rows="3" placeholder="请输入任务描述" />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'DataSyncEdit',
  setup() {
    const route = useRoute()
    
    const form = reactive({
      name: '',
      sourceDb: '',
      targetDb: '',
      syncType: 'full',
      description: ''
    })

    const handleSave = () => {
      ElMessage.success('保存成功')
    }
    
    const loadData = () => {
      // 模拟加载数据
      const id = route.params.id
      console.log('Loading data for ID:', id)
    }
    
    onMounted(() => {
      loadData()
    })

    return {
      form,
      handleSave
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 